<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='test1'></div>
    <div id='test2'></div>
    <div id='test3'></div>

    <script src="../demo1/js/react.development.js"></script>
     <script src="../demo1/js/react-dom.development.js"></script>
     <script src="../demo1/js/babel.min.js"></script>
     <script src="./js/prop-types.js"></script> 
     <!-- 全局有了 PropTypes -->
     <script type="text/babel">
         class Preson extends React.Component{
            //  props 为只读的

             // props类型限制
         static propTypes = {
                // PropTypes.string 限制类型  isRequired 必传 
                name:PropTypes.string.isRequired, 
                sex:PropTypes.string,
                age:PropTypes.number,
                func:PropTypes.func
            }
        static defaultProps ={
            sex:'不男不女',
            age:18
        }


            render(){
                // render this为组件实例对象
                
                const {name,age,sex} = this.props
                this.props.func?this.props.func():''
                return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age+1}</li>
                   </ul>
                )
            }
         }

        //  ReactDOM.render(<Preson anme='李华' age='23' sex='男'/>, document.querySelector('#test1'))
        const data = {name:'李华' ,age:23 ,sex:'男'}
        ReactDOM.render(<Preson {...data} />, document.querySelector('#test1'))
         ReactDOM.render(<Preson name='梨花' age={12}  foun={alert('aaa')} />, document.querySelector('#test2'))
         ReactDOM.render(<Preson name='12'  func={eee(999999)}  />, document.querySelector('#test3'))

         function eee(params) {
             console.log(params);
         }

     </script>
</body>
</html>